<template>
	<view class="order-item">
		<!-- 顶部 -->
		<view class="top">
			<view class="title">
				<view class="time" v-if="page=='complete'"> 已送达 </view>
				<view class="time" v-else> <text>{{orderInfo.pick_time}}内</text>&nbsp;送达 </view>
				<view class="price"> ￥ <text>{{orderInfo.delivery_money}}</text> </view>
			</view>
			<view class="desc" v-if="page=='order'"> {{desc}} </view>
			<view class="ys" v-if="page=='complete'"> {{ys}} </view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="distance">
				<view class="km">
					<view class="km-item"> {{shopMToKm}} </view>
					<view class="km-item"> km </view>
				</view>
				<view class="m">
					<view class="m-item"> {{userMToKm}} </view>
					<view class="m-item"> km </view>
				</view>
			</view>
			<view class="shop-user-nav" @tap="goOrderDetails(orderInfo.id)">
				<view class="shop-info">
					<view class="shop-name"> {{orderInfo?.shop_arr?.name}} </view>
					<view class="address"> {{orderInfo?.shop_arr?.detail_address}} </view>
				</view>
				<view class="user-info">
					<view class="user-name"> {{orderInfo.addressee_name}} </view>
					<view class="address"> {{orderInfo.address}} </view>
				</view>
			</view>
			<view class="nav" @tap="pickerRef.open()">
				<image src="/static/icon/mine/nav.png" class="n-img"/>
				<text> 导航 </text>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-box">
			<!-- 系统派单 -->
			<view class="t-btn" v-if="orderInfo.is_h==1">
				<view class="btn" @tap="turnOrder(orderInfo.id)">
          拒绝(<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="orderInfo.shengyue" @timeup="emit('timeup')"/>) 
        </view>
				<view class="btn" @tap="rushOrder(orderInfo.id)"> 收到 </view>
			</view>
			<!-- 未接单 -->
			<view class="btn-one" v-if="orderInfo.is_h==0" @tap="rushOrder(orderInfo.id)"> 抢单 </view>
			<!-- 已接单 -->
			<view class="contact" v-if="page=='order'">
				<view class="con-item">
					<image src="/static/icon/rider/contact_user.png" class="c-img"/>
					<text> 联系顾客 </text>
				</view>
				<view class="con-item" @tap="call(orderInfo.addressee_telphone)">
					<image src="/static/icon/rider/contact_user_phone.png" class="c-img"/>
					<text> 联系顾客 </text>
				</view>
				<view class="con-item">
					<image src="/static/icon/rider/contact_shop.png" class="c-img"/>
					<text> 联系商家 </text>
				</view>
				<view class="con-item" @tap="call(orderInfo?.shop_arr?.help_mobile)">
					<image src="/static/icon/rider/contact_shop-phone.png" class="c-img"/>
					<text> 联系商家 </text>
				</view>
				<view class="btn" v-if="orderInfo.rider_status==1" @tap="openModal(1)"> 我已到店 </view>
				<view class="btn" v-if="orderInfo.rider_status==2" @tap="openModal(2)"> 我已取货 </view>
				<view class="btn" v-if="orderInfo.rider_status==3" @tap="openModal(3)"> 我已送达 </view>
			</view>
			<!-- 订单结束 -->
			<view class="review-user" v-if="page=='complete'"> 
				<view class="btn" v-if="isEva" @tap="goEva(orderInfo.id)"> 评价用户 </view>
			</view>
		</view>
	</view>
	<Picker :arr="pickerArr" ref="pickerRef" @selected="openLoaction"/>
	<Modal ref="modalRef" :tips="tips" @confirm="confirm" />
</template>

<script setup>
	import { ref, computed } from 'vue';
	import Modal from '@/components/Modal.vue';
	import Picker from '@/components/Picker.vue'
	import { RushOrderApi, TurnDownOrderApi, SendShopApi, TakeShopApi, SendMemberApi } from '@/service/rider.js'
	const props = defineProps(['orderInfo', 'page', 'index'])
	const emit = defineEmits(['rush', 'timeup'])
	const modalRef = ref()
	const pickerRef = ref()
	const pickerArr = [
		{ title: '导航到商家', value: 1 },
		{ title: '导航到用户', value: 2 },
	]
	const desc = computed(() => {
		const { rider_status } = props.orderInfo
		return rider_status==1?'已接单，正在赶往商家':rider_status==2?'已到店，等待取货':rider_status==3?'已取货，正在配送':'已送达'
	})
	const ys = computed(() => {
		const { yongshi } = props.orderInfo
		const m = (yongshi/60).toFixed(0)
		return '共用时' + m +'分钟'
	})
	const userMToKm = computed(() => {
		return (props.orderInfo.res_distance/1000).toFixed(1)
	})
	const shopMToKm = computed(() => {
		return (props.orderInfo.shop_arr.distance/1000).toFixed(1)
	})
	const isEva = computed(() => {
		const { is_rider_comment, rider_status } = props.orderInfo
		let bool
		if(is_rider_comment==0&&(rider_status==4||rider_status==5||rider_status==6)) {
			bool = true
		} else {
			bool = false
		}
		return bool
	})
	const openLoaction = (e) => {
		const { address, addressee_name, address_latitude, address_longitude, shop_arr } = props.orderInfo
		let params = { }
		if(e.value==2) {
			params = {
				name: addressee_name,
				address,
				latitude: Number(address_latitude),
				longitude: Number(address_longitude)
			}
		} else {
			params = {
				name: shop_arr.name?shop_arr.name:'暂未设置',
				address: shop_arr.detail_address,
				latitude: Number(shop_arr.latitude),
				longitude: Number(shop_arr.longitude)
			}
		}
		pickerRef.value.close()
		uni.openLocation(params)
	}
	// const tap = () => {
	// 	modalRef.value.open()
	// }
	const goOrderDetails = (id) => {
		uni.navigateTo({
			url: `/pages/riderPages/riderOrderDetails/riderOrderDetails?id=${id}`
		})
	}
	// ================== home ============
	// 收到/抢单
	const rushOrder = (id) => {
		RushOrderApi({id}).then(res => {
			emit('rush')
		})
	}
	// 拒绝
	const turnOrder = (id) => {
		TurnDownOrderApi({id}).then(res => {
			emit('rush')
		})
	}
	// ===============order==============
	const tips = ref()
	const funcType = ref() // 1：已到店，2：已取货，3：已送达
	const openModal = (t) => {
		funcType.value = t
		if(t==1) {
			tips.value = '确定改为已到店吗？'
		} else if(t==2) {
			tips.value = '确定改为已取货吗？'
		} else {
			tips.value = '确定改为已送达吗？'
		}
		modalRef.value.open()
	}
	// 我已到店
	const isShop = (id) => {
		SendShopApi({id}).then(res => {
			emit('rush', { index:props.index, status: 2 })
			modalRef.value.close()
		})
	}
	// 我已取货
	const isTake = (id) => {
		TakeShopApi({id}).then(res => {
			emit('rush', { index:props.index, status: 3 })
			modalRef.value.close()
		})
	}
	// 我已送达
	const isSend = (id) => {
		SendMemberApi({id}).then(res => {
			emit('rush', { index:props.index, status: 4 })
			modalRef.value.close()
		})
	}
	const confirm = () => {
		if(funcType.value==1) return isShop(props.orderInfo.id)
		if(funcType.value==2) return isTake(props.orderInfo.id)
		if(funcType.value==3) return isSend(props.orderInfo.id)
	}
	const call = (phone) => uni.makePhoneCall({ phoneNumber: phone })
	// ============= complete ==============
	const goEva = (id) => {
		uni.navigateTo({
			url: `/pages/riderPages/evaUser/evaUser?order_id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.order-item {
		width: 100%;
		padding: 10px 12px;
		border-radius: 10px;
		margin-bottom: 10px;
		padding-bottom: 15px;
		background-color: #fff;
		box-sizing: border-box;
		.top {
			padding-bottom: 10px;
			border-bottom: 1px solid #eeeeee;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time {
					color: #333333;
					font-size: 14px;
					font-weight: 500;
					line-height: 20px;
					text {
						color: #FF9F00;
					}
				}
				.price {
					color: #333333;
					font-size: 12px;
					font-weight: 700;
					line-height: 17px;
					text {
						font-size: 18px;
					}
				}
			}
			.desc {
				color: #FF3B1E;
				font-size: 14px;
				margin-top: 10px;
				font-weight: 400;
				line-height: 14px;
			}
			.ys {
				color: #666666;
				margin-top: 5px;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			.distance {
				text-align: center;
				.km, .m {
					.km-item, .m-item {
						color: #333333;
						font-size: 12px;
						font-weight: 400;
						line-height: 12px;
					}
				}
				.m {
					position: relative;
					margin-top: 36px;
					&::before {
						position: absolute;
						top: -30px;
						left: 50%;
						display: block;
						content: '';
						width: 1px;
						height: 24px;
						background-color: #d8d8d8;
					}
				}
			}
			.shop-user-nav {
				flex: 1;
				margin: 0 14px;
				.shop-info, .user-info {
					.shop-name, .user-name {
						color: #222222;
						font-size: 16px;
						font-weight: 500;
						line-height: 20px;
					}
					.address {
						color: #999999;
						font-size: 14px;
						margin-top: 4px;
						font-weight: 400;
						line-height: 20px;
					}
				}
				.user-info {
					margin-top: 14px;
				}
			}
			.nav {
				display: flex;
				flex-direction: column;
				align-items: center;
				.n-img {
					width: 34px;
					height: 34px;
				}
				text {
					color: #999999;
					font-size: 12px;
					margin-top: 3px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.btn-box {
			padding: 0 8px;
			box-sizing: border-box;
			.t-btn {
				display: flex;
				justify-content: space-between;
				color: #333333;
				font-size: 17px;
				font-weight: 500;
				.btn {
					width: calc((100% - 21px) / 2);
					height: 40px;
					line-height: 40px;
					text-align: center;
					border-radius: 106px;
					border: 1px solid #999999;
					box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
					&:nth-last-of-type(1) {
						color: #fff;
						border: none;
						background: #FF3B1E;
					}
				}
			}
		}
		.btn-one {
			height: 40px;
			color: #ffffff;
			line-height: 40px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
		.contact {
			display: flex;
			.con-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 10px;
				.c-img {
					width: 22px;
					height: 22px;
				}
				text {
					color: #666666;
					font-size: 11px;
					margin-top: 4px;
					font-weight: 400;
					line-height: 13px;
				}
			}
			.btn {
				flex: 1;
				height: 40px;
				color: #ffffff;
				line-height: 40px;
				margin-left: 8px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
		.review-user {
			display: flex;
			justify-content: end;
			.btn {
				width: 100px;
				height: 40px;
				color: #ffffff;
				line-height: 40px;
				margin-left: 8px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>